<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="./css/reset.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="./js/jquery-2.2.3.js"></script>
        <style>
            #app {
            
            }
            #app .header-container{
                height: 50px; 
                background-color:  #409EFF;
                padding: 0px 15px;
            }
            #app .header-container .title{
                line-height: 50px;
                color: #ffffff;
                text-align: left;
                font-weight: bold;
                display: inline-block;
            }
            #app .header-container .header-right{
                height: 50px;
                display: inline-block;
                float: right;
            }
            #app .header-container .header-right li{
                float: left;
                width: 50px;
                height: 50px;
                text-align: center;
                
            }
            #app .header-container .header-right li:hover{ 
                background-color: rgb(25, 132, 247)
            }
            #app .header-container .header-right li img{
                width: 20px;
                height: 20px;
                margin-top: 15px;
                cursor: pointer;
            }
            #medias-container {
                text-align: left;
                margin: 20px auto;
                width: 90%;
                padding-bottom: 75px;
            }
            #medias-container .page-style{
                margin-top: 10px;
                text-align: right;
            }

            #medias-container .el-table td, .el-table th{
                padding:0px;
                font-size: 10px;
            }
            #medias-container .findbox{
                border: 1px solid #DCDFE6;
                border-radius: 5px;
                height: 80px;
                margin-bottom: 20px;
                padding: 25px 15px;
                
            }
            #medias-container .search-warp{
                margin-top: 10px;
                margin-bottom: 10px;
                display: flex;
                justify-content: flex-end
            }
            #medias-container .search-warp .el-input{
                width: 200px;
                /* float: right; */

            }
            .el-form{
              
            }
            .el-form .el-form-item .el-form-item__label{
                font-size: 10px;
            }
            .el-form .el-form-item .el-form-item__content{
                line-height: 28px;
            }
            .el-table .cell{
                padding-top: 3px;
                padding-bottom: 3px;
            }
            #app .el-dialog{
                border-radius: 5px;
            }
            #app .el-dialog .el-dialog__body{
                padding: 10px 15px;
            }
            #app .el-dialog .dialog-container{
                width: 100%;
            }
            #app .el-dialog .dialog-container img,
            #app .el-dialog .dialog-container video{
                width: 100%;
                height: 100%;
                display: inline-block;
            }
            #app .el-dialog .dialog-container p{
                text-align: center;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="header-container">
                <h3 class="title">执法记录仪采集系统</h3>
                <div class="header-right">
                    <ul>
                        <li><a href="./devicestatus.html"><img src="./img/back.png" @click="dropBtn"/></a></li>
                        <li><img src="./img/getout.png" @click="dropBtn"/></li>
                    </ul>
                </div>
            </div>
            <div id="medias-container">
                <div class="findbox">
                    <el-form :inline="true" :model="fileType" class="demo-form-inline">
                        <el-form-item label="文件类型:" size="mini">
                            <el-select v-model="fileType.text" placeholder="请选择文件类型">
                                <el-option label="全部" value="全部"></el-option>
                                <el-option label="图片" value="图片"></el-option>
                                <el-option label="视频" value="视频"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="拍摄日期:" size="mini" style="margin-left:5px">
                            <div class="block">
                                <el-date-picker
                                    v-model="psDate"
                                    type="datetime"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="findBtn" size="mini">查询</el-button>
                        </el-form-item>

                    </el-form>
                </div>
                <div class="search-warp">
                    <el-input
                        placeholder="输入人员姓名"
                        icon="search"
                        v-model.trim="search"
                        :value='search'
                        @compositionstart.native="_searchStart"
                        @compositionend.native="_searchEnd"
                        @input.native="_searchInput"
                        size="mini" >
                    </el-input>
                </div>
                <el-table
                    :data="mediaData"
                    border
                    style="width: 100%">
                    <el-table-column
                        label="序号">
                        <template scope="scope">
                            <p>{{(scope.$index + 1)+((page-1)*10)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="wjbh"
                        label="设备编号">
                    </el-table-column>
                    <el-table-column
                        prop="jybh"
                        label="人员编号">
                    </el-table-column>
                    <el-table-column
                        prop="jy_xm"
                        label="人员姓名">
                    </el-table-column>
                    <el-table-column
                        prop="pssj"
                        label="拍摄日期">
                        <template scope="scope">
                            <p style='white-space:nowrap;text-overflow:ellipsis;overflow:hidden;'
                               :title='_dateFormat(scope.row.pssj)'>{{_dateFormat(scope.row.pssj)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="长度[分钟]">
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="重要等级">
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="业务大类">
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="业务细类">
                    </el-table-column>
                    <el-table-column
                        prop="wjlx"
                        label="文件类型">
                    </el-table-column>
                    <el-table-column
                        label="大小[MB]">
                        <template scope="scope">
                            <p style='white-space:nowrap;text-overflow:ellipsis;overflow:hidden;'
                                :title='_bswopMB(scope.row.wjdx)'>{{_bswopMB(scope.row.wjdx)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="上传日期">
                        <template scope="scope">
                            <p style='white-space:nowrap;text-overflow:ellipsis;overflow:hidden;'
                                :title='_dateFormat(scope.row.scsj)'>{{_dateFormat(scope.row.scsj)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作" align="center" width="250">
                        <template scope="scope">
                            <el-button type="warning" @click='deletBtn(scope.row)' size="mini">删除</el-button>
                            <el-button type="primary" @click='ckxq(scope.row)' size="mini">查看</el-button>
                            <el-button type="primary" @click='settingBtn(scope.row)' size="mini">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="page-style"
                    background
                    layout="total, prev, pager, next"
                    @current-change="_handleCurrentChange"
                    :current-page.sync="page"
                    :page-size="pageSize"
                    :total="total">
                </el-pagination>
            </div>
            <el-dialog
                :visible.sync="visitDialog"
                :before-close="handleClose">
                <div class="dialog-container">
                    <template v-if="isImage">
                        <img :src = "visitData.bfwz" />
                    </template>
                    <template v-else>
                        <video controls="controls" controls="controls">
                            <source :src="visitData.bfwz" type="video/mp4" />
                            Your browser does not support the video tag.
                        </video>
                    </template>
                    <p><span>{{visitData.wjlx}}名称:</span>{{visitData.wjbh}}</p>
                </div>
            </el-dialog>
        </div>  
        <script src="./js/nwShowTools.js"></script>
        <script src="./js/mongo.js"></script>
        <script>
            new Vue({
                el: '#app',
                data () {
                    return {
                        manager: null,
                        mediaData: [],
                        visitDialog: false,
                        isImage: true,
                        visitData: {
                            bfwz: '',
                            wjbh: '',
                            wjlx: ''
                        },
                        total: 0,
                        page: 1,
                        pageSize: 10,
                        fileType: {
                            "text": '全部'
                        },
                        search: '',
                        psDate: ''
                    }
                },
                created () {
                    this.manager = new Manager()
                    this.manager.connect() 
                },
                mounted() {
                    var that = this
                    setTimeout(function(){
                        that._Init()
                    },50)
                   
                },
                beforeDestroy() {
                },
                methods: {
                    dropBtn () {
                        
                    },
                    _Init () {
                        let that = this
                        // this.manager.findByPage("MEDIAS",{}, this.page, this.pageSize, {}, function(res){
                        //     if(res.success){
                        //         that.mediaData = res.result.data
                        //         that.total = res.result.total
                        //     }
                        // })
                        this._getMEDIASData({})
                    },
                    _dateFormat (time) {
                        return time.toLocaleString()
                    },
                    _bswopMB (row) {
                        return (row/1024/1024).toFixed(2)
                    },
                    _getMEDIASData (params) {
                        let that = this
                        this.manager.findByPage("MEDIAS",params, this.page, this.pageSize, {}, function(res){
                            if(res.success){
                                that.mediaData = res.result.data
                                that.total = res.result.total
                            }
                        })
                    },
                    ckxq (row){
                        let result = row
                        this.isImage = (result.wjlx === "图片")? true : false
                        this.visitDialog = true
                        this.visitData = {
                            bfwz: result.bfwz,
                            wjbh: result.wjbh,
                            wjlx: result.wjlx
                        }
                    },
                    handleClose () {
                        this.visitDialog = false
                    },
                    _handleCurrentChange () {
                        this._getMEDIASData({})
                    },
                    findBtn () {
                        this.page = 1
                        let params = {
                                "wjlx": this.fileType.text==="全部"? "" : this.fileType.text,
                                "pssj": this.psDate===""? "": this.psDate
                            }
                        let that = this
                        this.manager.find("MEDIAS", params, {}, res =>{
                            if(res.success){
                                console.log(res)
                                that.mediaData = res.result
                            }
                        })
                    },
                    _searchStart () {

                    },
                    _searchEnd() {

                    },
                    _searchInput () {

                    },
                    deletBtn (row) {
                        var that =this
                        this.page = 1
                        this.manager.delete("MEDIAS",{_id: row._id},function(res){
                            console.log(res)
                            if(res.success){
                                that._getMEDIASData({})
                            }
                        })
                        
                    },
                    settingBtn () {

                    }

                },
            })
	    </script>
      
    </body>
</html>